<!--新页面模板-->
<template>
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-select v-model="form.roadId" clearable placeholder="选择路线" @change="changeRoad">
        <el-option
          v-for="item in roadList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.roadSectionId" clearable placeholder="选择标段" @change="changeRoadSection">
        <el-option
          v-for="item in bidSectionList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.investigateType" clearable placeholder="排查类型">
        <el-option
          v-for="item in EnumInvestigateTypeList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="form.dangerLevel" clearable placeholder="隐患等级">
        <el-option
          v-for="item in EnumDangerLevelList"
          :key="item.code"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>

    <div class="page_main">
      <!-- table -->
      <el-table :data="tableList" border @expand-change="detailRow" :row-key='getRowKeys' :expand-row-keys="expands">
        <el-table-column type="expand" label="展开详情"   width="70">
          <template slot-scope="props">
            <div class="expand-view">
              <geology-detail :currentRow="props.row" :model="1" :isLook="true"></geology-detail>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="55">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="name" min-width="150" show-overflow-tooltip label="隐患名称"></el-table-column>
        <el-table-column prop="damageTypeName" min-width="110" sortable label="隐患类型">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.damageTypeName | gradeTypeColor" class="s-white">
              {{scope.row.damageTypeName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="roadName" min-width="120" show-overflow-tooltip label="路线名称"></el-table-column>
        <el-table-column prop="roadSectionName" min-width="120" show-overflow-tooltip label="标段名称"></el-table-column>
        <el-table-column prop="dangerLevelName" min-width="110" sortable label="隐患等级">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.dangerLevelName | gradeDangerColor" class="s-white">
              {{scope.row.dangerLevelName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="investigateTypeName" min-width="100" label="排查类型"></el-table-column>
        <el-table-column prop="unitName" min-width="120" show-overflow-tooltip label="排查单位"></el-table-column>
        <el-table-column prop="userName" min-width="80" show-overflow-tooltip label="排查人"></el-table-column>
        <el-table-column prop="investigateTime" width="180" sortable label="排查时间">
          <template slot-scope="scope">{{scope.row.investigateTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column prop="checkStatusName" min-width="120" label="状态">
          <template slot-scope="scope">
            <el-tag effect="plain" size="mini" v-if="scope.row.dangerLevel !== 0" :type="scope.row.checkStatusName | gradeCheckColor">
              {{ formatCheckStatus(scope.row.checkStatusName,scope.row.overStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="count" min-width="90" sortable label="次序"></el-table-column>
<!--        <el-table-column prop="investigateTime" width="70" label="整改通知">-->
<!--          <template slot-scope="scope">-->
<!--            <el-badge :is-dot="scope.row.receiveType === 0" class="item"-->
<!--                      v-if="scope.row.receiveType !== 2">-->
<!--              <el-button class="share-button" @click="lookRectification(scope.row.id)"-->
<!--                         type="primary">查看-->
<!--              </el-button>-->
<!--            </el-badge>-->
<!--            <p v-else>无</p>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="操作" fixed="right" width="150">-->
<!--          <template slot-scope="scope">-->
<!--&lt;!&ndash;            <button class="btn_edit" @click="handleEdit(scope.row)" v-if="isConstructionUnit">编辑</button>&ndash;&gt;-->
<!--            <button class="btn_edit" @click="handleRecord(scope.row)">操作记录</button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>

    <el-dialog title="操作记录"
               :visible.sync="showRecord"
               :close-on-click-modal="false"
               @open="init"
               :close-on-press-escape="false" width="200px">
      <investigate-operation ref="operation" :id="this.investigateId"></investigate-operation>
    </el-dialog>
    <el-dialog title="查看整改通知单"
               :visible.sync="showRectificationList"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="200px">
      <el-card shadow="always" class="rectification-list" v-for="item in rectificationNoticeList" :key="item.id">
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>整改截止时间：<span>{{item.rectificationTime|formatTimer2}}</span>
        </p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>整改建议：<span>{{item.advice}}</span></p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>检查单位：<span>{{item.checkUnitName}}</span></p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>检查人：<span>{{item.checkUserName}}</span></p>
        <p><i class="el-icon-s-help" style="margin-right: 10px"></i>签收状态：<span>{{item.receiveTypeName}}</span></p>
        <div class="qianshou" v-if="item.receiveTypeName === '未签收' && isConstructionUnit">
          <el-button class="common_btn-defalut" type="primary" size="mini"
                     @click="signForRectification(item.id)">签收
          </el-button>
        </div>
      </el-card>
    </el-dialog>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>
<script>
import constUrl from '@/services/env'
import ItemMixins from "./modules/item.mixins";
import {
  getGeologyInvestigationList,
  getRectificationNoticeByInvestigateId,
  receiveRectificationNotice,
} from '@/services/model/investigation';
import GeologyDetail from "./modules/geology-detail";
import PictureViewer from '@/components/picture-viewer/index-name';
import InvestigateOperation from './modules/investigate-operation'
import Enums from '@/utils/enums'


export default {
  components: {
    PictureViewer,
    InvestigateOperation,
    GeologyDetail,
  },
  mixins: [ItemMixins,Enums],
  data() {
    return {
      expands: [],
      getRowKeys(row) {
        return row.id
      },
      EnumDangerLevelList: [],
      detailDamageActiveName: '',
      detailRoadActiveName: '',
      currentRow: {
        damageTypeList: [],
        measuresTypeList: [],
        roadEffectTypeList: [],
        damage: {remark: ''},
        roadEffect: {remark: ''},
      },
      tableList: [],
      isShowDialog: false,
      form: {
        page: 1,
        pageSize: 10,
        roadSectionId: ''
      },
      roadEffectActiveName: '',
      EnumNoticeOrderList: [],
      EnumInvestigateTypeList: [],
      roadEffectTypeList: [],
      checkList: [],
      showRectificationList: false,
      rectificationNoticeList: [],
      constUrl,
      showRecord: false,
      showCheck: false,
      investigateId: ''
    }
  },
  computed: {
    // 施工单位才展示排查编辑按钮
    isConstructionUnit() {
      return this.$store.state.userInfo.unitType === 6
    },
  },
  methods: {
    //签收整改通知单
    async signForRectification(id) {
      await receiveRectificationNotice({id: id})
      this.showRectificationList = false
      this.queryList();
    },
    //获取整改通知单
    async lookRectification(id) {
      this.showRectificationList = true
      let {data} = await getRectificationNoticeByInvestigateId({id: id})
      this.rectificationNoticeList = data || []
    },
    init() {
      this.$nextTick(() => {
        this.$refs.operation.getInvestigateOperation(this.investigateId)
      })
    },
    //查看操作记录时间线
    handleRecord(row) {
      this.showRecord = true
      this.investigateId = row.id
    },
    // 查看大图
    previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
      })
      this.$refs.imageViewer.showViewer(urlList, index)
    },
    // 表格展开时触发
    detailRow(row, expandedRows) {
      if (expandedRows.length) {
        this.expands = []
        if (row) {
          this.expands.push(row.id)
        }
      } else {
        this.expands = []
      }
      this.currentRow = row
    },
    /**
     * row  当前操作行的对象
     */
    handleEdit(row) {
      //排查状态为复核驳回时才能再次编辑
      if (row.checkStatusName !== '复核驳回') {
        this.$notify({
          type: 'warning',
          title: '提示',
          message: '当前状态不能进行编辑操作！'
        })
        return
      }
      this.$router.push({
        name: 'geology-add-edit',
        params: {currentRow: row}
      })
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    async queryList() {
      // 由于在前端进行过滤，所以name不能传到后端
      let res = await getGeologyInvestigationList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
    },
    changeRoadSection() {
      this.$set(this.form, 'slopeId', '');
      this.slopeList = []
      const {roadSectionId} = this.form
      this.getSelectSlopeList(roadSectionId)
    },
    //根据所选的灾害类型，展示不同的填写表单
    showCollapseTab(val) {
      return this.currentRow.damageTypeList.indexOf(val) > -1
    },
    //根据所选的影响公路情况，展示不同的填写表单
    showRoadEffectTab(val) {
      return this.currentRow.roadEffectTypeList.indexOf(val) > -1
    },
  },
  mounted() {
    // // 查询单位类型
    this.queryDictList(['EnumDangerLevel', 'EnumNoticeOrder', 'EnumInvestigateType'],
      ['EnumDangerLevelList', 'EnumNoticeOrderList', 'EnumInvestigateTypeList']);
    this.getRoadList();
  },
  activated() {
    this.queryList()
  },
}


</script>
<style lang="less">
  .rectification-list {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 10px;
    span {
      font-size: 15px;
      color: gray;
    }
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;

    .el-button {
      padding: 5px 5px;
      margin-right: 0px !important;
      margin-bottom: 10px;
      min-width: 25px;
      height: 25px;
    }
  }
  .el-card {
    margin-bottom: 20px;
  }
  .el-step.is-simple .el-step__title {
    font-size: 20px !important;
    line-height: 20px;
  }

  .measures-info {
    font-size: 15px;
    margin-left: 10px;
    line-height: 30px;
  }

  .detail-children {
    border-left: 2px;
    border-right: 2px;
    border-style: double;
    border-color: #e4e4e4;
    padding: 20px;

  }

  .detail-children-info {
    background-color: rgb(243 243 243);
    min-height: 220px;
    padding: 10px;
    border-radius: 20px
  }

  .s-white {
    color: #FFFFFF;
  }

  .father-box {
    margin-left: 20px;

    .el-checkbox__label {
      width: 120px;
      display: inline-block;
      padding-left: 10px;
      line-height: 19px;
      font-size: 16px;
      margin-top: 6px;
    }

    /deep/ .el-checkbox {
      width: 120px;
      line-height: 38px;
    }
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 20px;
  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .item-children {
    margin-top: 20px;

    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }

    /deep/ .el-tabs__item {
      font-size: 16px;
    }

    /deep/ .el-checkbox__label {
      font-size: 13px;
      line-height: 35px;
    }

    /deep/ .el-checkbox {
      display: block;
    }

    /deep/ .el-tabs__item.is-active {
      background-color: #e0e0e0;
      font-size: 16px;
    }
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;
  }

  .evaluate {
    /deep/ .el-form-item__label {
      font-size: 18px;
      color: #1990FE;
      font-weight: 600;
    }
  }

  .page_main {
    /deep/ .el-table__expand-icon {
      font-size: 15px !important;
    }
  }

  .children-tabs {
    .el-tabs__item {
      font-size: 15px !important;
      font-weight: 600;
    }

    .el-tabs__item:hover {
      cursor: pointer;
    }

    .el-tabs__item.is-active {
      color: #fff;
      background-color: #1990FE;
    }
  }

  .info-title {
    font-size: 18px;
    color: #1990FE;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .expand-view {
    width: 95%;
    .damage-info {
      font-size: 15px;
      margin-left: 10px;
      line-height: 30px;
    }

    .el-card__body {
      padding: 20px;
    }

    .el-tabs__item {
      font-size: 18px;
      font-weight: 600;
    }

    .info-title {
      font-size: 18px;
      color: #1990FE;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .info {
      font-size: 15px;
      margin-left: 20px;
      color: #8c939d;
    }

    .info2 {
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 15px;
      margin-left: 20px;
      color: #fff;
    }
  }

  .page_main {

    /deep/ .el-table__expanded-cell {
      background-color: #e4e4e4 !important;
    }
  }
  .qianshou {
    float: right;
    margin-right: 20px;
    margin-bottom: 5px;

    span {
      color: white !important;
    }

    .common_btn-defalut {
      padding: 5px 10px !important;
    }
  }
</style>
